<template>
	<view>
		<dsl-navbar :title="title" isBack bgTopImg="white"></dsl-navbar>
		<view class="rowsa bg-white " v-if="detailId == 50">
			<view v-for="(item,index) in classifys" :key="index" @click="num = index">
				<view :class="{'animation-scale-up':num == index}">
					<view>{{item.title}}</view>
					<view style="height: 6rpx;background-color:#00D88F;margin-top: 30rpx;opacity:0 "
						:style="num ==index?'opacity:1 ':'opacity:0' "></view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap padding bg-white animation-slide-top" v-if="isClassify2">
			<view v-for="(item,index) in classifyList" :key='index' class="filtrate_type" @click="detailId=item.id"
				:class="{'filtrate_type_active animation-scale-up':item.id == detailId}">
				{{item.title}}
			</view>
		</view>
		<view class="bg-white" v-if="detailId == 50 ">
			<view class="padding rowsb align-center">
				<view class="search_body rowsc align-center">
					<image src="/static/icon/icon_sysous.png" mode="widthFix" style="width: 30rpx;"
						class="margin-right-sm">
					</image>
					<input type="text" value="" placeholder="请输入关键词搜索" />
				</view>
				<view class="seach_submit">搜索</view>
			</view>
		</view>

		<view class="padding rowsb align-center">
			<view class="align-center">
				<view>选择：</view>
				<view class="bg-white padding-lr padding-tb-xs radius-xs">

					<picker @change="PickerChange" :value="index" :range="titleList" range-key="worktype">
						<view class="picker">
							{{index>-1?titleList[index].worktype:recruitTitle ||'暂无筛选条件'}}
						</view>
					</picker>
				</view>
			</view>
			<view class="text-sm text-gray " @click="isClassify = !isClassify" v-if="detailId != 40 && detailId !=50">筛选
				<text class="cuIcon-unfold"></text> </view>
		</view>
		<view class="flex flex-wrap padding  animation-slide-top" v-if="isClassify">
			<view v-for="(item,index) in classifyList" :key='index' class="filtrate_type" @click="detailId=item.id"
				:class="{'filtrate_type_active animation-scale-up':item.id == detailId}">
				{{item.title}}
			</view>
		</view>
		<view v-if="detailId == 40 || detailId == 50">
			<view v-if="list && list.length >0">
				<view class="padding-tb-sm padding-lr bg-white margin radius " v-for="(item,index) in list">
					<view :class="{'animation-scale-up':list.length !=0}"
						@click="$tools.push('/pages/workbench/modules/resumeDetail?id='+item.user_id)">
						<view class="flex align-center">
							<image :src="item.avatar" mode="aspectFill" class="user_image"></image>
							<view style="width: 550rpx;" class="padding-left align-center justify-between ">
								<view>{{item.username}}</view>
								<view class="justify-end">
									<view class="user_submit">查看简历</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<moreLoading></moreLoading>
			</view>
		</view>
		<view v-else>
			<view class="padding bg-white margin radius" v-if="list && list.length >0">
				<view v-for="(item,index) in list" class="solid-bottom padding-bottom"
					@click="$tools.push('/pages/workbench/modules/resumeDetail?id='+item.user_id)">
					<view class="rowsb text-sm text-gray padding-top-sm">
						<!-- <view>编号：923942929</view> -->
						<!-- <view>2021-05-31 20:20:20</view> -->
					</view>
					<view class="flex ">
						<image :src="item.avatar" mode="aspectFill" class="user_image"></image>
						<view style="width: 550rpx;" class="padding-left ">
							<view class="flex align-center">
								<view>{{item.name}}</view>
								<!-- <image src="/static/work/icon_xingbienv.png" mode="" class="user_sex margin-left"></image> -->
								<view class="user_age margin-left">{{item.age}}岁</view>
								<view class="user_education margin-left">{{item.degree}}</view>
							</view>
							<view class="flex justify-between align-center">
								<view class="text-sm text-gray ">
									<view class="margin-top-xs">意向城市：{{item.address}}</view>
									<view class="margin-top-xs">意向岗位：{{item.recruitclassify_ids}}</view>
								</view>
								<view class="user_submit">查看简历</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<moreLoading></moreLoading>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/common/util.js');
	var time = util.formatTime(new Date());
	import {
		talent_pool, //人才库
		getguarantee, //保入职
		getRecruitApplyList, //:1=待面试,2=待入职,3=已入职,4=离职,5=未通过
		getrecruitList, //工作台的所发布的招聘信息展示
	} from '@/common/path.js'
	export default {
		data() {
			return {
				classifys: [{
						'title': '我的员工',
						id: 1
					},
					{
						'title': '员工筛选',
						id: 2
					}
				],
				num: 0, //默认选中分类状态
				isClassify2:false,
				isClassify: false, //筛选
				time: time,
				pageData: 1,
				title: '', //标题
				index: -1, //,默认选中的第几个
				detailId: '', //id
				list: [], //列表
				titleList: [], //分类idvideoSetMen
				recruit_id: '', //招聘信息id
				recruitTitle: '', //招聘信息名称
				classifyList: [{
						title: '人才库',
						id: 50
					},
					{
						title: '已入职',
						id: 3
					},
					{
						title: '未通过',
						id: 5
					},
					{
						title: '离职',
						id: 4
					},
					{
						title: '待面试',
						id: 1
					},
					{
						title: '待入职',
						id: 2
					},
					{
						title: '全部',
						id: 12
					}
				],

			}
		},
		onLoad(option) {
			this.title = option.title
			this.detailId = option.id


			if (this.detailId == 40) {
				this.getguarantee() //保入职
			} else if (this.detailId == 50) { //人才库
				this.talent_pool()
			} else {
				this.getrecruitList()
			}

		},
		watch: {
			num(i) {
				this.talent_pool()
				if (i == 1) {
					this.isClassify2 = true
				} else {
					this.isClassify2 = false
				}
			},
			detailId(i) {
				if (i == 50) {
					this.title = '人才库'
					this.talent_pool()
				} else if (i == 3) {
					this.title = '已入职'
				} else if (i == 5) {
					this.title = '未通过'
				} else if (i == 4) {
					this.title = '离职'
				} else if (i == 1) {
					this.title = '待面试'
				} else if (i == 2) {
					this.title = '待入职'
				} else if (i == 12) {
					this.title = '全部'
				}
				if(i != 50){
					this.isClassify2 = false
				}else{
					this.isClassify = false
				}
				if (i != 40 && i != 50) {
					this.getrecruitList()
				}

			}
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
				this.recruit_id = this.titleList[e.detail.value].id
				this.getRecruitApplyList()
			},
			//工作台发布信息展示
			getrecruitList() {
				let data = {
					page: 1,
					listrows: 999
				}
				this.Http.POST(getrecruitList, data)
					.then((res) => {
						if (res.code == 1) {
							console.log('[工作台的所发布的招聘信息展示]', res);
							this.titleList = res.data
							this.recruitTitle = res.data[0].worktype
							this.recruit_id = res.data[0].id
							this.getRecruitApplyList()
						}
					})
			},

			//工作台 - 待面试,待入职,已入职,离职,未通过,待业中,保入职
			getRecruitApplyList() {
				let data = {
					page: this.pageData,
					listrows: 20,
					status: this.detailId,
					recruit_id: this.recruit_id,
					time: this.time
				}
				this.Http.POST(getRecruitApplyList, data)
					.then((res) => {
						if (res.code == 1) {
							console.log('[成员列表]', res.data.data);
							if (this.pageData == 1) {
								this.list = res.data.data
							} else {
								this.list.push(...res.data.data)
							}
						} else {
							if (this.pageData == 1) {
								this.list = []
							}
						}
					})
			},
			//保入职
			getguarantee() {
				this.Http.POST(getguarantee, {
						page: this.pageData,
						listrows: 10
					})
					.then((res) => {
						// console.log('[保入职]', res);
						if (res.code == 1) {
							if (this.pageData == 1) {
								this.list = res.data
							} else {
								this.list.push(...res.data)
							}
						} else {
							if (this.pageData == 1) {
								this.list = []
							}
						}
					})
			},
			//人才库
			talent_pool() {
				this.Http.POST(talent_pool, {
						page: this.pageData,
						listrows: 10
					})
					.then((res) => {
						// console.log('[人才库]', res);
						if (res.code == 1) {
							if (this.pageData == 1) {
								this.list = res.data
							} else {
								this.list.push(...res.data)
							}
						} else {
							if (this.pageData == 1) {
								this.list = []
							}
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F6FA;
	}

	.user_image {
		width: 80rpx;
		height: 80rpx;
		background: #eeeeee;
		border-radius: 50%;
		opacity: 1;
	}

	.user_sex {
		width: 24rpx;
		height: 24rpx;
	}

	.user_age {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 1;
	}

	.user_education {
		width: 72rpx;
		height: 30rpx;
		border: 1rpx solid #2B9AFF;
		opacity: 1;
		border-radius: 20rpx;
		text-align: center;
		color: #2B9AFF;
		font-size: 20rpx;
		line-height: 30rpx;
	}

	.user_submit {
		width: 140rpx;
		height: 50rpx;
		background: #00D88F;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
		font-size: 24rpx;
	}

	.search_body {
		width: 540rpx;
		height: 60rpx;
		background: #F5F6F7;
		opacity: 1;
		border-radius: 30rpx;
	}

	.seach_submit {
		width: 120rpx;
		height: 60rpx;
		background: #8B8787;
		opacity: 1;
		line-height: 60rpx;
		border-radius: 99rpx;
		color: white;
		text-align: center;
	}

	view {}

	.filtrate_type {
		padding: 10rpx 20rpx;
		margin-right: 10rpx;
		border-radius: 99rpx;
	}

	.filtrate_type_active {
		background-color: #00D88F;
		color: white !important;
	}
</style>
